<template>
  <div>
    <img v-if="imgUrl" :src="imgUrl" alt="" style="width: 60px; height: 60px; border-radius: 6px;" @click="imgShows">
    <span v-else>--</span>
    <file-preview @close="filePreviewShow = false" :imgList="uris" :filePreviewShow="filePreviewShow"></file-preview>
  </div>
</template>

<script>
import { getFileListByIds } from '@/api/api'
import { apiBaseUrlDownload } from "@/utils/request";
import FilePreview from '@/components/fileActions/FilePreview'
export default {
  props: {
    ids: {
      type: [String, Number],
      default: ''
    },
  },
  components: {
    FilePreview
  },
  data() {
    return {
      domianURL: apiBaseUrlDownload,
      filePreviewShow: false,
      uris: [],
      noPicture: require('@/assets/img/noPicture.jpg'),
      imgUrl: ''
    }
  },
  watch: {
    ids(newVal) {
      this.getFileList(newVal)
    }
  },
  mounted() {
    console.log('newValnewValnewValnewVal',this.ids);
    this.getFileList(this.ids)
  },
  methods: {
    imgShows() {
      if (this.ids) {
        this.filePreviewShow = true
      } else {
        this.$antdMessage.info('暂无信息')
      }
    },
    getFileList(ids) {
      getFileListByIds({ ids }).then(res => {
        if (res.result && res.result.length > 0) {
          this.imgUrl = this.domianURL + res.result[0].uri
          res.result.forEach(item => {
            this.uris.push(this.domianURL + item.uri)
          })
        }
      })
    }
  },
}
</script>
